<template>
  <div class="column">
  <!-- 左侧头像区域 -->
      <div class="avatar-column">
        <div class="square-avatar">
          <img
              :src="userInfo.avatar || 'https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png'"
              alt="用户头像"
          />
        </div>
      </div>
  <el-card class="user-info-card">
    <div class="container">
      

      <!-- 右侧信息区域 -->
      <div class="info-column">
        <el-row :gutter="10">
          <!-- 标签列 -->
          <el-col :span="8" class="label-col">
            <div class="info-item">用户名</div>
            <div class="info-item">邮箱</div>
            <div class="info-item">余额:</div>
            <div class="info-item">生日</div>
          </el-col>

          <!-- 数值列 -->
          <el-col :span="16" class="value-col">
            <div class="info-item">{{ userInfo.username }}</div>
            <div class="info-item">{{ userInfo.email }}</div>
            <div class="info-item">
              <el-tag type="danger" size="small">100¥ {{ userInfo.balance }}</el-tag>
            </div>
            <div class="info-item">
              <el-icon><Calendar /></el-icon>
              {{ formatDate(userInfo.birthday) }}
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </el-card>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import { useStore } from 'vuex';
import { Calendar } from '@element-plus/icons-vue'

const store = useStore();

const userInfo = computed(() => store.getters.getUser || {
  username: '',
  email: '',
  balance: 100,
  birthday: '',
  avatar: ''
});
userInfo.balance=100;
const formatDate = (dateString) => {
  return new Date(dateString).toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit'
  })
}
</script>

<style scoped>

.column{
  display:flex;
   justify-content: space-between; /* 水平排列并分配空间 */

}

.user-info-card {
  width: 600px;
  margin: 20px;

  ::v-deep .el-card__body {
    padding: 20px;
  }
}

.container {
  display: flex;
  gap: 30px;
}

.avatar-column {
  flex: 0 0 500px;
}

.square-avatar {
  width: 500px;
  height: 500px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid #ebeef5;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.info-column {
  flex: 1;
}

.info-item {
  line-height: 32px;
  padding: 4px 0;
  display: flex;
  align-items: center;
}

.label-col {
  color: #909399;
  font-weight: 500;
  text-align: left;
}

.value-col {
  color: #606266;

  .el-tag {
    vertical-align: middle;
  }

  .el-icon {
    color: #409eff;
    margin-right: 6px;
    vertical-align: middle;
  }
}
</style>